{%  extends "base.html" %}
{% block content %}
<div class="row page" id="docs" style="display:block;">
        <div class="col-md-12" style="">
            <h3><i class="glyphicon glyphicon-leaf"></i> What is jsTree?</h3>

            {% include "base_index.html" %}

            <ul class="nav nav-tabs">
                <li class="active" id="selected_menu"><a href="/" class="nava">Overview</a></li>
                <li><a href="/doc/config" class="nava">Configuration</a></li>
                <li><a href="/doc/htmls" class="nava">HTML data</a></li>
                <li><a href="/doc/json" class="nava">JSON data</a></li>
                <li><a href="/doc/events" class="nava">Events</a></li>
                <li><a href="/doc/interaction" class="nava">Interaction</a></li>
            </ul>
            <div class="tab-content">
                <div id="overview" class="tab-content-item">
                    <div class="row">
                        <div class="col-md-12">
                            <h3><i class="glyphicon glyphicon-leaf"></i> Getting Started - everything at a glance</h3>
                        </div>
                    </div>
                    <div class="row" style="margin-top:1em;">
                        <div class="col-md-12">
                            <ol class="spaced">
                                <li>
                                    <h4 class="list-group-item-heading"><a
                                            href="https://github.com/vakata/jstree/zipball/3.3.8">Download jsTree</a> or
                                        use CDNJS</h4>
                                    <p class="list-group-item-text">If you choose to download - all the files you need
                                        are in the <code>dist/</code> folder of the download</p>
                                </li>
                                <li>
                                    <h4 class="list-group-item-heading">Include a jsTree theme</h4>
                                    <p class="list-group-item-text">Themes can be autloaded too, but it is best for
                                        performance to include the CSS file.</p>
                                    <p class="list-group-item-text">If hosting the files yourself:</p>
                                    <pre style="margin-top:1em;"><code>&lt;link rel="stylesheet" href="<strong>dist/themes/default/style.min.css</strong>" /&gt;</code></pre>
                                    <p class="list-group-item-text">If using CDNJS:</p>
                                    <pre style="margin-top:1em;"><code>&lt;link rel="stylesheet" href="<strong>https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css</strong>" /&gt;</code></pre>
                                </li>

                                <li>
                                    <h4 class="list-group-item-heading">Setup a container</h4>
                                    <p class="list-group-item-text">This is the element where you want the tree to
                                        appear, a <code>&lt;div&gt;</code> is enough. This example has a nested <code>&lt;ul&gt;</code>
                                        as there is no other data source configured (such as JSON).</p>
                                    <pre style="margin-top:1em;"><code>  &lt;div <strong>id="jstree_demo_div"</strong>&gt;&lt;/div&gt;</code></pre>
                                </li>
                                <li>
                                    <h4 class="list-group-item-heading">Include jQuery</h4>
                                    <p class="list-group-item-text">jsTree requires <strong>1.9.0 or greater</strong> in
                                        your webpage. You can use a CDN version or include a local copy.</p>
                                    <pre style="margin-top:1em;"><code>&lt;script src="<strong>https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js</strong>"&gt;&lt;/script&gt;</code></pre>
                                </li>
                                <li>
                                    <h4 class="list-group-item-heading">Include jsTree</h4>
                                    <p class="list-group-item-text">If hosting the files yourself: for production
                                        include the minified version: <code>dist/jstree.min.js</code>, there is a
                                        development version too: <code>dist/jstree.js</code></p>
                                    <pre style="margin-top:1em;"><code>&lt;script src="<strong>dist/jstree.min.js</strong>"&gt;&lt;/script&gt;</code></pre>
                                    <p class="list-group-item-text">If using CDNJS:</code></p>
                                    <pre style="margin-top:1em;"><code>&lt;script src="<strong>https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js</strong>"&gt;&lt;/script&gt;</code></pre>
                                </li>
                                <li>
                                    <h4 class="list-group-item-heading">Create an instance</h4>
                                    <p class="list-group-item-text">Once the DOM is ready you can start creating jstree
                                        instances.</p>
                                    <pre style="margin-top:1em;"><code>$(function () { <strong>$('#jstree_demo_div').jstree();</strong> });</code></pre>
                                </li>
                                <li>
                                    <h4 class="list-group-item-heading">Listen for events</h4>
                                    <p class="list-group-item-text">jsTree uses events to notify you when something
                                        changes while users (or you) interact with the tree. So binding to jstree events
                                        is as easy binding to a click. There is a <a href="/api/#/?q=.jstree%20Event">list
                                            of events</a> and what information they provide in the API documentation.
                                    </p>
                                    <pre style="margin-top:1em;"><code>$('#jstree_demo_div').on("changed.jstree", function (e, data) {
  console.log(data.selected);
});</code></pre>
                                </li>
                                <li>
                                    <h4 class="list-group-item-heading">Interact with your instances</h4>
                                    <p class="list-group-item-text">Once an instance is ready you can invoke methods on
                                        it. There is a <a href="/api/#/?q=(">list of available methods</a> in the API
                                        documentation. The three examples below do exactly the same thing</p>
                                    <pre style="margin-top: 1em;"><code>$('button').on('click', function () {
  <strong>$('#jstree').jstree(true).select_node('child_node_1');</strong>
  <strong>$('#jstree').jstree('select_node', 'child_node_1');</strong>
  <strong>$.jstree.reference('#jstree').select_node('child_node_1');</strong>
});</code></pre>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p style="text-align:center;">
                                <button class="btn btn-info"
                                        onclick="$(this).blur().parent().next().slideToggle(); return false;">show the
                                    complete code
                                </button>
                            </p>
                            <pre style="padding:0px 20px; display:none;"><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jsTree test&lt;/title&gt;
  <span class="comment">&lt;!-- <strong>2</strong> load the theme CSS file --&gt;</span>
  &lt;link rel="stylesheet" href="<strong>dist/themes/default/style.min.css</strong>" /&gt;
&lt;/head&gt;
&lt;body&gt;
  <span class="comment">&lt;!-- <strong>3</strong> setup a container element --&gt;</span>
  &lt;div id="jstree"&gt;
    <span class="comment">&lt;!-- in this example the tree is populated from inline HTML --&gt;</span>
    &lt;ul&gt;
      &lt;li&gt;Root node 1
        &lt;ul&gt;
          &lt;li id="child_node_1"&gt;Child node 1&lt;/li&gt;
          &lt;li&gt;Child node 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Root node 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;button&gt;demo button&lt;/button&gt;

  <span class="comment">&lt;!-- <strong>4</strong> include the <a href="//jquery.org">jQuery</a> library --&gt;</span>
  &lt;script src="<strong>dist/libs/jquery.js</strong>"&gt;&lt;/script&gt;
  <span class="comment">&lt;!-- <strong>5</strong> include the minified <a href="//jstree.com">jstree</a> source --&gt;</span>
  &lt;script src="<strong>dist/jstree.min.js</strong>"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function () {
    <span class="comment">// <strong>6</strong> create an instance when the DOM is ready</span>
    <strong>$('#jstree').jstree();</strong>
    <span class="comment">// <strong>7</strong> bind to events triggered on the tree</span>
    <strong>$('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });</strong>
    <span class="comment">// <strong>8</strong> interact with the tree - either way is OK</span>
    $('button').on('click', function () {
      <strong>$('#jstree').jstree(true).select_node('child_node_1');</strong>
      <strong>$('#jstree').jstree('select_node', 'child_node_1');</strong>
      <strong>$.jstree.reference('#jstree').select_node('child_node_1');</strong>
    });
  });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
 </code></pre>
                        </div>
                    </div>

                </div>

</div>
<p style="text-align:center; margin-top:2em;"><a href="//old.jstree.com" target="_blank">click here for the old site (v.1)</a>
</p>
</div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function(){
            $("#homes").addClass("active")
        });
    </script>
{% endblock %}